<template>
	<div id="home-input-card">
		<mu-container>
			<mu-card class="input-text">
				<mu-auto-complete
					:data="autoCompleteData"
					v-model="text"
					:placeholder="parse('Conto apronit eraniros')"
				>
					<template #append v-if="text.length > 0">
						<span class="clear-text" @click="text = ''">✖</span>
					</template>
				</mu-auto-complete>
			</mu-card>
		</mu-container>

		<div class="card-divide"></div>

		<mu-container>
			<mu-card>
				<template v-if="queryText.length > 0">
					<mu-card-title
						:title="parse(titleText(queryText[0]['0']))"
						:sub-title="'Latinization = ' + titleText(queryText[0]['0'])"
					></mu-card-title>
					<mu-divider></mu-divider>
					<mu-list>
						<template v-for="item in getTransText(queryText[0])">
							<mu-list-item
								avatar
								button
								:key="subItem"
								:ripple="false"
								v-for="subItem in item.data"
							>
								<mu-list-item-action>
									<mu-avatar>
										<img v-no-drag :src="avatarList[item.avatar]" />
									</mu-avatar>
								</mu-list-item-action>
								<mu-list-item-title
									@click="item.avatar === '关联' ? (text = subItem) : 0"
									>{{ parse(subItem) }}</mu-list-item-title
								>
							</mu-list-item>
						</template>
					</mu-list>
				</template>
			</mu-card></mu-container
		>
	</div>
</template>

<script lang="ts">
import {
	defineComponent,
	ref,
	computed,
	watch,
	onUnmounted,
} from "@vue/composition-api";
import { TypeData } from "../store";
import { titleText, getTransText } from "../utils/format";
import { avatarList } from "../assets/img/export";
import { parse } from "../utils/phomita";

export default defineComponent({
	name: "home-input-card",
	setup(props, ctx) {
		const text = ref((ctx.root.$route.query.text as string) ?? "");
		const parsedText = computed(() => parse(text.value));
		const data = computed(() => ctx.root.$store.state.data as TypeData[]);
		const autoCompleteData = computed(() =>
			data.value.map((item) => item["0"])
		);
		const queryText = computed(() =>
			data.value.filter((item) => item["0"] === text.value).length > 0
				? data.value.filter((item) => item["0"] === text.value)
				: data.value.filter((item) => item["0"] === "lanortos")
		);

		const watchText = watch([() => text.value], ([val]) => {
			ctx.root.$router.push({ query: { text: val } });
		});

		onUnmounted(() => {
			watchText();
		});

		return {
			data,
			text,

			parse,
			parsedText,
			queryText,
			titleText,
			avatarList,
			getTransText,
			autoCompleteData,
		};
	},
});
</script>

<style>
#home-input-card {
	padding-top: 99px;

	@media screen and (max-width: 768px) {
		padding-top: 90px;
	}
}

#home-input-card .container {
	display: flex;
	justify-content: center;
	align-items: center;
}

#home-input-card .container .mu-card {
	width: 65%;
	@media screen and (max-width: 1200px) {
		width: 80%;
	}
	@media screen and (max-width: 768px) {
		width: 95%;
	}
}

#home-input-card .clear-text {
	cursor: pointer;
}

#home-input-card .input-text {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 15px;
	flex-direction: column;
}

#home-input-card .input-text .mu-input {
	width: 85%;
}

#home-input-card .card-divide {
	padding: 15px;
}
</style>
